<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>元素拖拽</title>
	<style>

		body{
			height: 3000px;
		}

		#dong{
			width: 300px;
			height: 300px;
			background-color: red;
			position: absolute;
			top: 50%
			left: 50%;
			cursor: move;
		}

	</style>
</head>
<body>
	
	<div id="dong"></div>
	

	<script type="text/javascript">
		
		var move = function(id) {

			var o = document.getElementById(id);

			o.onmousedown = function(e) {
				var e = e || window.event;

				var x = e.layerX || e.offsetX;
				var y = e.layerX || e.offsetX;

				x = x - document.body.scrollLeft;
		        y = y - document.body.scrollTop;
				
			
				document.onmousemove = function(e) {
					var e = e || window.event;

					o.style.left = (e.clientX - x) + "px";
		            o.style.top = (e.clientY - y) + "px";

				};

				document.onmouseup = function() {
					document.onmousemove = null;
				};

			};

		};	

		move('dong');

	</script>
</body>
</html>